@media screen and (min-width:400px){
    html{
      background: palevioletred;
      font-size: 18px
    }
  }
  @media screen and (min-width:640px){
    html{
      background: palegoldenrod;
      font-size: 24px;
    }
  }
$fontSize: 2rem;
$lineHeight: 3rem !default; 
$borderDrection: top;
$border1: left;
$border2: right;
$maps: (1, 2, 3);
@import "./02.scss";
@mixin center-block{
    margin-left: auto;
    margin-right: auto;
}
@mixin border-pretty($borderRight: 4px dashed pink, $borderLeft: 4px dotted purple){
    border-#{$border1}: $borderLeft;
    border-#{$border2}: $borderRight;
}
@function getDirection($type){
    @if($type == "top"){
        @return "top";
    }
    @if($type == "bottom"){
        @return "bottom";
    }
}
.main{
    width: 20rem;
    height: 20rem;
    font-size: $fontSize;
    background: skyblue;
    line-height: $lineHeight;
    .box1{
        background: palegreen;
        width: 10rem;
        height: 10rem;
        border-#{$borderDrection}: 4px solid;
        @include center-block;
        @include border-pretty
    }
    .box2{
        $d:getDirection("top");
        @extend .box1;
        background-color: $bg;
        border-#{$d}: 5px dotted;
    }
    
}
@each $i in $maps{
    @if($i == 1){
        li:nth-child(#{$i}){background: peru;
        height: 50px;}
    }@else if($i == 2){
        li:nth-child(2){background: pink;
        height: 100px;}
    }@else{
        li:nth-child(3){background: lawngreen;
        height:80px;}
    }
    
}
